<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.0/socket.io.js"></script>
</head>
<body>
    <h1></h1>
    <ul id="msgs"></ul>
    <h1>No problem</h1>
    <ul id="messages"></ul>
    <input id="nickname" placeholder="请输入昵称">
    <input id="msg" placeholder="请输入消息">
    <button onclick="sendMsg()">发送</button>
</body>


<script>

    var socket = io()
    function sendMsg(){
        var nickname = document.getElementById("nickname").value;
        var msg = document.getElementById("msg").value;

        msg = nickname + ":" +msg + (new Date().toLocaleTimeString());

        socket.send(msg);
        createElement(msg)
    }


    socket.on("message",function (message){
        createElement(message)
    })

    function createElement(msg){
        var li = document.createElement('li');
        li.textContent = msg;
        document.getElementById("messages").appendChild(li)
    }
</script>
</html>